<!DOCTYPE HTML>
<html lang="zxx">
	<head>
	<title>账户注册</title>
	<!-- Meta tag Keywords -->
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta charset="UTF-8" />
	<meta name="keywords" content="Triple Forms Responsive Widget,Login form widgets, Sign up Web forms , Login signup Responsive web form,Flat Pricing table,Flat Drop downs,Registration Forms,News letter Forms,Elements" />
	<!-- css files -->
	<link rel="stylesheet" href="static/css/style01.css" type="text/css" media="all" />
	<!-- Style-CSS -->
	<link href="static/css/font-awesome.min.css" rel="stylesheet">
	<!-- Font-Awesome-Icons-CSS -->
	</head>

	<body>
    <div class="main-bg" id="mian"> 
      <!-- title -->
      <h1>徽翼签会员注册</h1>
      <!-- //title -->
      <div class="sub-main-w3"> 
        <!-- vertical tabs -->
        <div class="vertical-tab">
          <div class="section-w3ls">
            <input type="radio" name="sections" id="option1" checked>
            <label for="option1" class="icon-left-w3pvt"><span class="fa fa-user-circle" aria-hidden="true"></span>客户注册</label>
            <article id="login">
              <form class="layui-form ">
                <div class="input">
				  <span aria-hidden="true" class="fa fa-user-o"></span>
                  <input type="text" lay-verify="required" name="username" placeholder="请输入您账号" autocomplete="off" id="username" name="name" required="required">
                </div>
                <div class="input">
                  <span aria-hidden="true" class="fa fa-key"></span>
                  <input type="password" lay-verify="required|password" name="password" placeholder="请输入密码" autocomplete="off" id="password" class="layui-input">
                </div>
                <div class="input">
                  <span aria-hidden="true" class="fa fa-key"></span>
                  <input type="password" lay-verify="required|comPassword" name="password" placeholder="请确认密码" autocomplete="off" id="comPassword" class="layui-input">
                </div>
                <div class="input">
                  <span aria-hidden="true" class="fa fa-phone"></span>
                  <input type="text" lay-verify="required|phone" name="text" placeholder="请输入手机号" autocomplete="off" id="phone" maxlength="11" class="layui-input">
                </div>
                <div class="input code-box">
                  <span aria-hidden="true" class="fa fa-key"></span>
                  <input type="text" lay-verify="required" name="captcha" placeholder="请输入验证码" id="authCode" autocomplete="off" maxlength="8" class="layui-input">
                  <button type="button" class="layui-btn btn-auth-code submit">获取验证码</button>
                </div>
                <button lay-filter="login" lay-submit=""  class="btn submit">注册</button>
              </form>
            </article>
          </div>
          <div id="section2" class="section-w3ls">
            <input type="radio" name="sections" id="option2">
            <label for="option2" class="icon-left-w3pvt"><span class="fa fa-pencil-square" aria-hidden="true"></span>员工注册</label>
            <article>
              <form class="layui-form ">
                <div class="input">
				  <span aria-hidden="true" class="fa fa-user-o"></span>
                  <input type="text" lay-verify="required" name="username" placeholder="员工请输入账号" autocomplete="off" id="username" name="name" required="required">
                </div>
                <div class="input">
                  <span aria-hidden="true" class="fa fa-key"></span>
                  <input type="password" lay-verify="required|password" name="password" placeholder="请输入密码" autocomplete="off" id="password" class="layui-input">
                </div>
                <div class="input">
                  <span aria-hidden="true" class="fa fa-key"></span>
                  <input type="password" lay-verify="required|comPassword" name="password" placeholder="请确认密码" autocomplete="off" id="comPassword" class="layui-input">
                </div>
                <div class="input">
                  <span aria-hidden="true" class="fa fa-phone"></span>
                  <input type="text" lay-verify="required|phone" name="text" placeholder="请输入手机号" autocomplete="off" id="phone" maxlength="11" class="layui-input">
                </div>
                <div class="input code-box">
                  <span aria-hidden="true" class="fa fa-key"></span>
                  <input type="text" lay-verify="required" name="captcha" placeholder="请输入验证码" id="authCode" autocomplete="off" maxlength="8" class="layui-input">
                  <button type="button" class="layui-btn btn-auth-code submit">获取验证码</button>
                </div>
                <button lay-filter="login" lay-submit=""  class="btn submit">注册</button>
              </form>
            </article>
          </div>
          <div id="section3" class="section-w3ls">
            <input type="radio" name="sections" id="option3">
            <label for="option3" class="icon-left-w3pvt"><span class="fa fa-lock" aria-hidden="true"></span>供应商注册</label>
            <article>
              <form class="layui-form ">
                <div class="input">
				  <span aria-hidden="true" class="fa fa-user-o"></span>
                  <input type="text" lay-verify="required" name="username" placeholder="供应商请输入账号" autocomplete="off" id="username" name="name" required="required">
                </div>
                <div class="input">
                  <span aria-hidden="true" class="fa fa-key"></span>
                  <input type="password" lay-verify="required|password" name="password" placeholder="请输入密码" autocomplete="off" id="password" class="layui-input">
                </div>
                <div class="input">
                  <span aria-hidden="true" class="fa fa-key"></span>
                  <input type="password" lay-verify="required|comPassword" name="password" placeholder="请确认密码" autocomplete="off" id="comPassword" class="layui-input">
                </div>
                <div class="input">
                  <span aria-hidden="true" class="fa fa-phone"></span>
                  <input type="text" lay-verify="required|phone" name="text" placeholder="请输入手机号" autocomplete="off" id="phone" maxlength="11" class="layui-input">
                </div>
                <div class="input code-box">
                  <span aria-hidden="true" class="fa fa-key"></span>
                  <input type="text" lay-verify="required" name="captcha" placeholder="请输入验证码" id="authCode" autocomplete="off" maxlength="8" class="layui-input">
                  <button type="button" class="layui-btn btn-auth-code submit">获取验证码</button>
                </div>
                <button lay-filter="login" lay-submit=""  class="btn submit">注册</button>
              </form>
            </article>
          </div>
        </div>
        <!-- //vertical tabs -->
        <div class="clear"></div>
      </div>
      <!-- copyright -->
      <div class="copyright">
        <h2></h2>
      </div>
      <!-- //copyright --> 
    </div>
</body>
	<script src="../lib/layui/layui.js"></script>
	<script>
        layui.use(["form", "okGVerify", "okLayer"], function () {
            let form = layui.form;
            let $ = layui.jquery;
            let okGVerify = layui.okGVerify;
            let okLayer = layui.okLayer;
            let regPhone = /^[1][0-9]{10}$/;
            /**手机号验证**/
            let setInter = '';
            /**定时器对象*/
            let second = 60;//设置时间
            /**
             * 初始化验证码
             */
            // let verifyCode = new okGVerify("#captchaImg");

            /**
             * 数据校验
             */
            form.verify({
                password: [/^[\S]{6,12}$/, "密码必须6到12位，且不能出现空格"],
                phone: [
                    regPhone,
                    '输入的手机号格式不正确，请重新输入'
                ],
                comPassword: function (val) {
                    let password = $("#password").val();
                    return password == val ? '' : "两次密码不一致";
                }
            });

            /**
             * 表单提交
             */
            form.on("submit(login)", function (data) {
                okLayer.greenTickMsg("注册成功,去登陆", function () {
                    window.location = "./login.html";
                });
                return false;
            });

            /**
             * 表单input组件单击时
             */
            $("#login .input-item .layui-input").click(function (e) {
                e.stopPropagation();
                $(this).addClass("layui-input-focus").find(".layui-input").focus();
            });

            /**
             * 表单input组件获取焦点时
             */
            $("#login .layui-form-item .layui-input").focus(function () {
                $(this).parent().addClass("layui-input-focus");
            });

            /**
             * 表单input组件失去焦点时
             */
            $("#login .layui-form-item .layui-input").blur(function () {
                $(this).parent().removeClass("layui-input-focus");
                if ($(this).val() != "") {
                    $(this).parent().addClass("layui-input-active");
                } else {
                    $(this).parent().removeClass("layui-input-active");
                }
            });

            /**获取验证码**/
            $('.btn-auth-code').click(function () {
                let that = $(this),
                    phone = $("#phone").val();
                if ($(this).hasClass("layui-btn-disabled")) {
                    return;
                }
                if (regPhone.test(phone)) {
                    if (!setInter) {
                        clearInterval(setInter);
                        that.addClass("layui-btn-disabled");
                        that.text(second + "秒后获取");
                        setInter = setInterval(function () {
                            second--;
                            if (second < 1) {
                                clearInterval(setInter);
                                that.removeClass("layui-btn-disabled");
                                that.text("重新获取");
                                setInter = "";
                                second = 60;
                            } else {
                                that.text(second + "秒后获取");
                            }
                        }, 1000);
                    }
                } else {
                    layer.msg("输入的手机号格式不正确，请重新输入", {
                        icon: "5",
                        anim: "6",
                    });
                    $("#phone").focus();
                }
            });
        });
    </script>
</html>
